<template>
    <div class="contion">
        <div class="address">
            <div class="address_1">
                <van-icon name="arrow-left" size="25" @click="back()" style="margin-left:5px"/>
                <span style="margin-left:250px"><b>选择地址</b></span>
            </div>
            <div class="address_3">
                <div>
                    <div class="aa">
                        <div class="address_3_1">
                            <van-icon name="location-o" size="20" style="color:#E44F32;margin:15px"/>
                        </div>
                        <div class="ser">— — — — — — — —</div>
                    </div>
                    <div class="bb">地址</div>
                </div>
                <div>
                    <div class="aa">
                        <div class="address_3_2">
                            <van-icon name="idcard" size="20" style="margin:15px"/>
                        </div>
                        <div class="ser">— — — — — — — —</div>
                    </div>
                    <div>付款方式</div>
                </div>
                <div>
                    <div class="address_3_2">
                        <van-icon name="orders-o" size="20" style="margin:15px"/>
                    </div>
                    <div>订单结算</div>
                </div>
            </div>
            <div class="address_2" v-for="(j,k) in adlist" :key="k">
                <div>
                    <input type="radio" :id="`radio-${j.id}`" :value="j.id" v-model="radio1" @change="handleAddressSelect(j.id)">
                    <label :for="`radio-${j.id}`"></label>
                </div>
                <router-link  v-bind:to="'adddeta/?id='+j.id">
                <div>
                    <div class="cc">
                        <span><b>{{ j.remark }}</b></span>
                        <div>
                            <span>{{ j.name }}&nbsp&nbsp;&nbsp;</span>
                            <span>{{ j.phone }}</span>
                        </div>
                        <div>
                            <span>{{ j.province }}</span>
                            <span>{{ j.city }}</span>
                            <span>{{ j.address }}</span>
                        </div>
                    </div>
                </div>
                </router-link>
            </div>
            <div class="address_4">
                <el-button @click="add_address">＋ 添加地址</el-button>
            </div>
            <div class="address_5">
                <el-button @click="pay">下一步</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const radio1 = ref(null)

const back = () =>{
    router.back();
}

let adlist = ref([])

const getaddress = () =>{
    axios.get(`http://127.0.0.1:8000/home/address/?user=${localStorage.getItem("userid")}`).then(res=>{
        // console.log(res)
        adlist.value = res.data.data
    })
}

const add_address= ()=>{
    router.push('/add')
}

const handleAddressSelect = (id) => {
  radio1.value = id;
  // 这里可以添加其他逻辑，比如将选中的地址 id 发送给后端
  console.log(id);
};

const pay = () =>{
    if(radio1.value == null){
        ElMessage.error("请选择地址")
    }else{
        localStorage.setItem("addressid",radio1.value)
        router.push('/pay')
    }
}
onMounted(()=>{
    getaddress()
})

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.address{
    background-color: #F7F7F7F7;
    height: auto;
    width: 600px;
} 

.address_1{
    width: 600px;
    height: 60px;
    font-size: 25px;
    padding-top: 20px;
    background-color: #FFFFFF;
}

.address_2{
    width: 400px;
    height: 100px;
    font-size: 20px;
    background-color: #FFFFFF;
    border-radius: 15px;
    margin-top: 20px;
    margin-left: 1px;
    padding-left: 100px;
    padding-right: 197px;
    margin-bottom: 10px;
    padding-top: 10px;
    display: flex;
    flex-direction: row;
}

.cc{
    color: #000;
}

.address_3{
    display: flex;
    flex-direction: row;
    height: 100PX;
    background-color: #FFFFFF;
}

.aa{
    display: flex;
    flex-direction: row;
}

.address_3_1{
    margin-left: 100px;
    width:50px;
    height:50px;
    border-radius: 15px;
    background-color:#E44F320D;
}

.address_3_2{
    width:50px;
    height:50px;
    border-radius: 15px;
    background-color:#9F9E9A0D;
}

.ser{
    margin-top: 20px;
    color:darkgray;
    font-size: 10px;
}

.bb{
    margin-left: 110px;
}

.address_4 button{
    margin-top: 20px;
    margin-left: 100px;
    width: 400px;
    height: 60px;
    border: 1px solid #E44F32;
    background-color: #FFFFFF;
    font-size: 20px;
    color:#E44F32;
    border-radius: 15px;
}

.address_5 button{
    margin-top: 200px;
    margin-left: 100px;
    width: 400px;
    height: 60px;
    border: 1px solid #E44F32;
    background-color: #E44F32;
    font-size: 20px;
    color:#FFFFFF;
    border-radius: 15px;
    margin-bottom: 40px;
}

</style>